<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <script src="../../lib/vue.js"></script>
    <!-- <script src="../../lib/vue.min.js"></script> -->
    <link rel="stylesheet"
        href="../../lib/vant@2.12.54_lib_index.css">
    <link rel="stylesheet"
        href="../../styles/vant.css" />
    <script src="../../lib/vant@2.12.54_lib_vant.min.js"></script>
    <script src="../../lib/axios-0.18.0.js"></script>
    <script src="../../http/request.js"></script>
    <script src="../../utils/fileCompress.js"></script>
    <script src="../../utils/toFormData.js"></script>
    <script src="../../utils/dateFormat.js"></script>
    <script src="../../areaList/areaList.js"></script>
    <script src="../../areaList/activeAreaList.js"></script>
    <title>代跑跑</title>
    <style>
        .main {
            overflow: scroll;
            height: 85vh;
        }

        .van-tabbar-item__icon {
            font-size: 30px;
        }

        .van-uploader__wrapper {
            flex-wrap: wrap;
        }

        .van-cell.overflow-visible {
            overflow: visible;
            height: 0;
        }

        .van-uploader__upload {
            bottom: 90px;
            left: 0;
        }

        .van-coupon__condition {
            display: none;
        }

        .van-coupon__amount {
            color: var(--van-primary);
        }

        .van-coupon-list__bottom .van-button--danger {
            background-color: var(--van-primary);
            border: 1px solid var(--van-primary);
        }

        .van-coupon-list__list {
            height: calc(60vh - 48px) !important;
        }

        .van-dialog__confirm,
        .van-dialog__confirm:active {
            color: var(--van-primary);
        }

        .description-box .van-cell {
            margin-top: 0;
            padding-top: 0;
        }

        .urgentOrder-box .van-field__label {
            width: 5.2em;
        }


        .van-switch--on {
            background-color: var(--van-primary);
        }

        .van-stepper--round .van-stepper__plus {
            background-color: var(--van-primary);
        }

        .van-stepper--round .van-stepper__minus {
            color: var(--van-primary);
            border: 1px solid var(--van-primary);
        }

        .van-stepper__input {
            font-size: 16px;
        }

        .amount__containter .van-field__control--custom {
            justify-content: flex-end;
        }

        .description-box-mark .van-cell__label {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar title="下单"></van-nav-bar>
        <div class="main">
            <van-form @submit="onSubmit">
                <van-cell-group title="地址信息"
                    inset>

                    <!-- 联系电话 -->
                    <van-field v-model="phone"
                        type="number"
                        required
                        name="phone"
                        label="联系电话："
                        placeholder="请输入电话号码"
                        :rules="[{ validator:validatorForPhone, required: true, message: '请输入正确的国内电话号码' }]"></van-field>

                    <!-- 任务地址 -->
                    <van-field readonly
                        clickable
                        required
                        name="address"
                        :value="address"
                        label="任务地址："
                        placeholder="点击选择任务地址"
                        @click="isShowAddressList = true"
                        :rules="[{ required: true, message: '请选择任务地址' }]"></van-field>

                    <!-- 任务地址弹出层 -->
                    <van-popup v-model="isShowAddressList"
                        round
                        position="bottom">
                        <van-tabs v-model="areaList">
                            <van-tab title="静园">
                                <van-area title="静园"
                                    :area-list="JingYuanAreaList"
                                    @confirm="getAddress"
                                    @cancel="isShowAddressList = false"></van-area>
                            </van-tab>
                            <van-tab title="怡园">
                                <van-area title="怡园"
                                    :area-list="YiYuanAreaList"
                                    @confirm="getAddress"
                                    @cancel="isShowAddressList = false"></van-area>
                            </van-tab>
                            <!-- <van-tab title="教学楼">
                                <van-area title="教学楼" :area-list="TeachingBuildingAreaList" @confirm="getAddress"
                                    @cancel="isShowAddressList = false"></van-area>
                            </van-tab>
                            <van-tab title="其他">
                                <van-area title="其他" :area-list="OtherAreaList" @confirm="getAddress"
                                    @cancel="isShowAddressList = false"></van-area>
                            </van-tab> -->
                        </van-tabs>
                    </van-popup>

                </van-cell-group>

                <van-cell-group inset
                    title="跑腿信息">
                    <!-- 任务信息 -->
                    <van-field v-model="packageInfo"
                        required
                        rows="4"
                        name="packageInfo"
                        :border="false"
                        autosize
                        label="任务信息："
                        type="textarea"
                        maxlength="100"
                        placeholder="请填写任务信息或上传图片"
                        show-word-limit
                        :rules="[{ validator:validatorForPackageInfo, message: '请填写任务信息或上传取件图片' }]"></van-field>

                    <!-- 取件图片集 -->
                    <van-field name="images"
                        class="overflow-visible"
                        :border="false">
                        <template #input>
                            <van-uploader v-model="images"
                                :max-count="maxCount"
                                :multiple="true"
                                accept="image/*"></van-uploader>
                        </template>
                    </van-field>

                    <!-- 快递件数 -->
                    <van-field class="amount__containter"
                        name="count"
                        label="快递件数："
                        readonly>
                        <template #input>
                            <van-stepper v-model="count"
                                min="1"
                                max="5"
                                input-width="60px"
                                button-size="24px"
                                step="1"
                                theme="round"></van-stepper>
                        </template>
                    </van-field>

                    <!-- 任务备注 -->
                    <van-field v-model="remark"
                        name="remark"
                        label="任务备注："
                        placeholder="请输入任务备注"></van-field>

                    <div class="description-box-mark">
                        <van-cell label="如果任务为代取快递：物流公司为顺丰，或取件码为88开头的快递，请备注姓名和手机尾号"
                            title="">
                        </van-cell>
                    </div>

                    <!-- 悬赏金额 -->
                    <van-field class="amount__containter"
                        :border="false"
                        name="amount"
                        label="悬赏："
                        readonly>
                        <template #input>
                            <van-stepper v-model="amount"
                                min="5.00"
                                max="99.00"
                                input-width="60px"
                                button-size="24px"
                                step="0.50"
                                theme="round"
                                :decimal-length="2"></van-stepper>
                        </template>
                    </van-field>

                    <div class="description-box">
                        <van-cell label="请根据任务难度自行加价，更容易得到同学帮助哦~~"
                            title="">
                        </van-cell>
                    </div>

                </van-cell-group>

                <!-- 提交按钮 -->
                <div style="margin: 16px;">
                    <van-button round
                        block
                        :loading="isLoading"
                        type="primary"
                        native-type="submit">
                        下 单
                    </van-button>
                </div>

            </van-form>

        </div>

        <!-- 底层标签页 -->
        <van-tabbar class="tabbar"
            v-model="active"
            @change="onChange">
            <van-tabbar-item icon="wap-home"
                name="home">主页</van-tabbar-item>
            <van-tabbar-item icon="shop"
                name="information">商家</van-tabbar-item>
            <van-tabbar-item icon="thumb-circle"
                name="distribute">下单</van-tabbar-item>
            <van-tabbar-item icon="bars"
                name="order">订单</van-tabbar-item>
            <van-tabbar-item icon="manager"
                name="personalCenter">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</body>
<script>
    var APPID = "wx576478355cd34bb0"
    new Vue({
        el: "#app",
        data() {
            return {
                isPayVersion: true, // 是否开启支付版本
                isLoading: false, // 提交按钮是否禁用  
                isUseDiscount: false, // 是否使用优惠
                phone: '', // 联系电话
                address: '', // 送达地址
                packageInfo: '', // 取件信息
                images: [], // 取件图片数组, 用于回显
                count: 1, // 快递件数
                remark: '', // 备注
                amount: 5.00, // 悬赏
                maxCount: 3, // 最大上传文件数
                isShowAddressList: false, // 控制展示地址选择的弹出层
                active: 'distribute', // 控制标签栏的显示
                areaList: '', // 一级地址                          
                JingYuanAreaList: JingYuanAreaList, // 静园地址列表
                YiYuanAreaList: YiYuanAreaList, // 怡园地址列表
                TeachingBuildingAreaList: TeachingBuildingAreaList, // 教学楼地址列表
                OtherAreaList: OtherAreaList, // 其他地址列表
            }
        },
        methods: {
            // 联系方式表单校验
            validatorForPhone(val) {
                return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(val)
            },
            // 取件信息表单校验
            validatorForPackageInfo() {
                return !!(this.images.length || this.packageInfo)
            },
            // 确认送达地址
            getAddress(values) {
                // 拼接要展示的地址
                this.address = values.filter((item) => !!item).map((item) => item.name).join('/')
                this.isShowAddressList = false
            },
            // Tabbar 跳转其他页面
            onChange(index) {
                if (index === 'home') {
                    location.href = '../../home.html?flag=0'
                } else {
                    location.href = `../../${index}.html`
                }
            },
            // 提交订单
            onSubmit(values) {
                this.$dialog.confirm({
                    message: `请确认您的任务地址:<span style="color: #ff0000;">${this.address}</span>`,
                }).then(async () => {
                    // 订单提交提示信息
                    this.$notify({
                        message: '订单提交中，请稍后~~',
                        color: '#ffffff',
                        background: '#ff976a',
                        duration: 2000,
                    })
                    this.isLoading = true
                    // 调用 toFormData 函数，将值存进 FormData 对象
                    const formData = await toFormData(values)
                    formData.append('productId', 8) // 增加商品类型 id
                    formData.append('isUseDiscount', this.isUseDiscount)
                    // 调用发单接口
                    axios({
                        method: 'POST',
                        url: '/user/order/distribute',
                        // 设置 请求头 formData 格式
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        data: formData
                    }).then(res => {
                        if (res.code === 1) {
                            if (this.isPayVersion) {
                                // 支付版本
                                const data = res.data
                                if (typeof WeixinJSBridge == "undefined") {
                                    if (document.addEventListener) {
                                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                                    } else if (document.attachEvent) {
                                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                                    }
                                } else {
                                    WeixinJSBridge.invoke(
                                        'getBrandWCPayRequest', {
                                        "appId": APPID,  //公众号ID，由商户传入
                                        "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                                        "nonceStr": data.nonceStr, //随机串
                                        "package": data.prepayId,
                                        "signType": "RSA", //微信签名方式：
                                        "paySign": data.paySign //微信签名
                                    }, (res) => {
                                        if (res.err_msg === "get_brand_wcpay_request:ok") {
                                            // 使用以上方式判断前端返回,微信团队郑重提示：
                                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                            this.$notify({
                                                message: '订单支付成功,将在2秒后跳转至订单~~',
                                                color: '#ffffff',
                                                background: '#2ED0DF',
                                                duration: 2000,
                                            })
                                            setTimeout(() => {
                                                location.href = `../../order.html`
                                            }, 2000)
                                        } else {
                                            this.$notify({
                                                message: '订单支付失败,请重新下单，如有疑问请添加客服解决~~',
                                                color: '#ffffff',
                                                background: '#ee0a24',
                                                duration: 2000,
                                            })
                                            this.isLoading = false
                                        }
                                    }
                                    )
                                }
                            } else {
                                // 非支付版本
                                this.$notify({
                                    message: '订单支付成功,将在2秒后跳转至订单~~',
                                    color: '#ffffff',
                                    background: '#2ED0DF',
                                    duration: 2000,
                                })
                                setTimeout(() => {
                                    location.href = `../../order.html`
                                }, 2000)
                            }
                        }
                    })
                }).catch(() => {
                })
            },
        },
        async mounted() {
            const res = await axios({ method: 'GET', url: '/user/user/getDA' })
            this.phone = res.data.phone ? res.data.phone : ''
            if (res.data.address) {
                const firstAddress = res.data.address.slice(0, 2)
                if (firstAddress !== '静园' && firstAddress !== '怡园') {
                    this.address = ''
                } else {
                    this.address = res.data.address
                }
            }
        },
        watch: {
            // 这里强行改的图片上传图标位置，最好不要乱动  蛆:liuwy
            images(newVal, oldVal) {
                const newImagesLength = newVal.length
                const oldImagesLength = oldVal.length
                if (newImagesLength > 0) {
                    const imageDiv = document.querySelector('.van-cell.overflow-visible')
                    imageDiv.style.height = '100px'
                } else {
                    const imageDiv = document.querySelector('.van-cell.overflow-visible')
                    imageDiv.style.height = '0px'
                }
                if (newImagesLength < this.maxCount && oldImagesLength !== this.maxCount) {
                    const uploader = document.querySelector('.van-uploader__upload')
                    uploader.style.left = '0px'
                    setTimeout(() => {
                        const uploader = document.querySelector('.van-uploader__upload')
                        uploader.style.left = `${-88 * newImagesLength}px`
                    }, 1)
                } else if (newImagesLength < this.maxCount && oldImagesLength === this.maxCount) {
                    setTimeout(() => {
                        const uploader = document.querySelector('.van-uploader__upload')
                        uploader.style.left = `${-88 * newImagesLength}px`
                    }, 1)
                } else if (newImagesLength === this.maxCount) {
                    setTimeout(() => {
                        const preview = document.querySelector('.van-uploader__preview:last-child')
                        preview.style.left = '0px'
                    }, 1)
                }
            },
        },
    })

</script>

</html>